<template>
	<view>
		<u-tabbar :value="tabIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#09C272" inactiveColor="#7d7e80">
			<u-tabbar-item :text="item.name" :name="item.path" v-for="item in tabList" v-bind:key="item.name"
				@click="tabClick(item.path)">
				<image class="tab-img-size" slot="active-icon" :src="item.activeIcon"></image>
				<image class="tab-img-size" slot="inactive-icon" :src="item.noActiveIcon"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		name: 'tabbar',
		props: {
			tabIndex: {
				type: String,
				default: '/pages/mall/index'
			}
		},
		data() {
			return {
				tabList: []
			}
		},
		created() {
			let tabList = []
			store.getters.menu.forEach(item => {
			  const { activeIcon, noActiveIcon } = this.parseIcon(item.icon);
			  tabList.push({
			    name: item.name,
			    activeIcon,
			    noActiveIcon,
			    path: item.path
			  });
			});
			this.tabList = tabList
		},		
		methods: {
			tabClick(path) {
				uni.switchTab({
					url: path
				});
			},
			parseIcon(iconStr) {
			  try {
			    const icon = JSON.parse(iconStr);
			    return { activeIcon: icon.activeIcon, noActiveIcon: icon.noActiveIcon };
			  } catch (error) {
			    console.warn('解析 icon 数据失败:', error);
			    return { activeIcon: null, noActiveIcon: null };
			  }
			}
		}
	}
</script>

<style scoped>
	.tab-img-size {
		width: 22px;
		height: 22px;
	}
</style>